<template>
  <ve-pie height="200px" :legend="legend" :data="chartData" :colors="colors" :extend="extendsConfig" />
</template>

<script>
import VePie from 'v-charts/lib/pie.common';
export default {
  components: {
    VePie
  },
  props: {
    rows: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      chartData: {
        columns: ['title', 'value'],
        rows: this.rows
      },
      colors: ['#7BB4FF', '#FF9595'],
      legend: {
        bottom: '0',
        icon: 'circle'
      },
      extendsConfig: {
        series: {
          radius: [60, 78], // 设置内半径和外半径，形成环状
          avoidLabelOverlap: false, // 避免标注重叠
          hoverAnimation: false, // 移入放大
          center: ['50%', '40%'],
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: false,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          },
          tooltip: {
            position: function(point, params, dom, rect, size) {
              // 其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
              var x = point[0]; //
              var y = point[1];
              var boxWidth = size.contentSize[0];
              var boxHeight = size.contentSize[1];
              var posX = 0; // x坐标位置
              var posY = 0; // y坐标位置

              if (x < boxWidth) {
                // 左边放不开
                posX = 5;
              } else {
                // 左边放的下
                posX = x - boxWidth;
              }

              if (y < boxHeight) {
                // 上边放不开
                posY = 5;
              } else {
                // 上边放得下
                posY = y - boxHeight;
              }

              return [posX, posY];
            }
          }
        }
      }
    };
  },
  watch: {
    rows: {
      handler(data) {
        this.chartData.rows = data;
      },
      deep: true
    }
  }
};
</script>
